<template>
  <section>
    <div v-if="title" class="row items-center q-mx-sm">
      <h2 class="col title size-24 text-shadow-white q-pb-sm">{{ title }}</h2>
      <q-btn v-if="link" :to="link" dense label="更多" flat color="grey-7" />
    </div>
    <div class="row">
      <a-map-image-box
        class="col-xl-4 col-lg-4 col-md-6 col-sm-6 col-xs-12 q-pa-sm q-mb-md"
        v-for="map of maps"
        :key="map.id"
        :simple="simple"
        :map="map"
      >
      </a-map-image-box>
    </div>
  </section>
</template>

<script>
import AMapImageBox from './mapImageBox'

export default {
  name: 'aMapImageBoxes',
  components: { AMapImageBox },
  props: {
    title: {
      type: String,
      required: false
    },
    maps: {
      type: Array,
      required: true
    },
    simple: {
      type: Boolean,
      required: false,
      default: false
    },
    link: {
      type: String,
      required: false
    }
  }
}
</script>
